<template>
	<view class="bank-card-type">
		<g-navbar title="选择所属银行" />
		<view class="bank-card-type-list">
			<view class="bank-card-type-item" v-for="item,index in bankCardTypeList" :key="item.id"
				:class="{'current':currentId === item.id}" @click="selectType(item)">
				<image :src="item.bank_logo" class="icon" />
				<view class="text">
					{{item.bank_name}}
				</view>
				<view class="current-icon" v-if="currentId === item.id">
					<i class="iconfont icon-current" />
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, Ref } from 'vue';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	
	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getBankCardTypeList();
	})

	interface bankCard {
		id : number, //条目id
		bank_name : string,
		bank_logo : string,
	}

	const bankCardTypeList : Ref<bankCard[]> = ref([]);

	const currentId : Ref<number> = ref(-1);

	const store = useStore();

	const getBankCardTypeList = async () : Promise<void> => {
		const result : bankCard[] = (await uni.http.POST(REST_URL.getBankCardTypeList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})).data;
		bankCardTypeList.value = result;
	}

	const selectType = (item : bankCard) => {
		currentId.value = item.id;
		uni.navigateBack({
			success: () => {
				setTimeout(() => {
					uni.$emit('selectBankCardType', item.bank_name);
				}, 200)
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./bankCardType.scss";
</style>